:root {
    --primary-green: #5c946e;
    --lighter-green: #80c2af;
    --blue-black: #2a2d34;
    --baby-blue: #a0dde6;

    --white: #fff;
    --grey: #bbb;
    --translucent-dark-green: rgba(128,194,175,0.5);
    --translucent-gray: rgba(187,187,187,.35);
    --translucent-blue-black: rgba(42,45,52,0.9);
    --gold: #e4b248;
}

body {
        background: var(--primary-green); 
        color: var(--blue-black); 
        font-family: "Maven Pro";
    }

.table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}

ul.headerMenu  {
    border-radius: 10px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

ul.tab {
    border-radius: 10px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--primary-green); 
    background-color: var(--lighter-green); 
    border: 1px solid var(--primary-green); 
}

.vagaro-footer{
    display: none !important;
}

/* Float the list items side by side */
ul.tab li
{
    float: left;
}

ul.headerMenu li {
    float: left;
}

/* Style the links inside the list items */
ul.tab li a, ul.headerMenu  li a {
    display: inline-block;
    border-radius: 10px;
    color: var(--blue-black); 
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover, ul.headerMenu  li a:hover {
    background-color: var(--baby-blue); 
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active, ul.headerMenu  li a:focus, .active {
    background-color: var(--baby-blue); 
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid var(--primary-green); 
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

#background {
    border-radius: 10px;
    height: 100vh;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    overflow: visible;
    display: block;
    padding: 1px 0 0 0;
}
#spacer {
    width: 50%;
}

#headerBar {
    position: relative;
    color: var(--blue-black); 
    background-color: var(--baby-blue); 
    border: solid 2px var(--blue-black); 
    border-radius: 10px;
    width: 95%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    margin-top: 0;
    text-align: center;
    display: block;
}

#map-plug {display:none;}

#google-reviews {
display:flex;
flex-wrap:wrap;
}

.review-item {
border:solid 1px rgba(190,190,190,.35);
margin:0 auto;
padding:1em;
flex: 1 1 20%;
}

@media ( max-width:1200px) {
  .review-item { flex: 1 1 40%; }
}

@media ( max-width:450px) {
  .review-item { flex: 1 1 90%; }
}

.review-meta, .review-stars {text-align:center; font-size:115%;}
.review-author { text-transform: capitalize; font-weight:bold; }
.review-date {opacity:.6; display:block;}
.review-text {  line-height:1.55; text-align:left; max-width:32em; margin:auto;}

.review-stars ul {
display: inline-block;
list-style: none;
margin:0; padding:0;
}

.review-stars ul li {
float: left;
margin-right: 1px;
line-height:1;
}

.review-stars ul li i {
  color: var(--gold);
  font-size: 1.4em;
  font-style:normal;
}
.review-stars ul li i.inactive { color: var(--grey);}
.star:after { content: "\2605"; }

#titleText {
    font-family: "Sigmar One", serif;
    font-size: 700%;
    line-height: calc(.65em + .65vw);
    margin: 3vh;
}

#headerImage
{
    max-width: 100%;
    max-height: 200px;
}

.floatedLeftImage{
    float: left;
    height: auto;
    width: 50%;
    max-width: 350px;
    margin-right: 2%;
    padding-bottom: 0px;
    margin-bottom: 10px;
    box-shadow: 10px 10px 5px var(--blue-black); 
}
.floatedLeft{
    float: left;
    height: auto;
    width: 50%;
    max-width: 350px;
    margin-right: 2%;
    padding-bottom: 0;
    margin-bottom: 0;
}

.floatedRight{
    float: right;
    height: auto;
    width: 50%;
    max-width: 350px;
    margin-left: 2%;
    padding-bottom: 0;
    margin-bottom: 0;
}


.floatedRightImage{
    float: right;
    height: auto;
    width: 50%;
    max-width: 350px;
    margin-left: 2%;
    padding-bottom: 0;
    margin-bottom: 10px;
    box-shadow: 10px 10px 5px var(--blue-black);
}


.headerButton {
    color: var(--blue-black); 
    background-color: var(--baby-blue); 
    margin: 0;
    margin-top: 5px;
    border-style: hidden;
    font-weight: bold;
    font-size: 125%;
    cursor:pointer;
}


.headerButton:hover {
    color: var(--primary-green);
}


.standardButton
{
    background-color:var(--lighter-green); 
    border: none;
    color: var(--blue-black); 
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.video{
    display:block; width: 400px; height:300px; margin: 0 auto;
}

#contentContainer {
    color: #1F1F15;
    background-color: var(--white);
    background-color: var(--translucent-dark-green);
    border: solid 1px;
    border-radius: 10px;
    padding-top: 1vh;
    padding-left: 1vh;
    padding-right: 1vh;
    padding-bottom: 1vh;
    margin-top: 2vh;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15.5vh;
    width: 75%;
    box-shadow: 20px 10px 50px 5px var(--blue-black); ;
    overflow: auto;
    height: auto;
}

.border{
    border: solid 1px;
    border-radius: 10px;
}

.content {
    text-align: center;
    margin-bottom: 3vh;
}

.contentTitle {
    text-align: center;
    font-family: "Sigmar One", serif;
    font-size: 120%;
}

.contentSubtitle {
    text-align: left;
    font-family: "Sigmar One", serif;
    font-size: 100%;
}

.footerTitle {
    text-align: center;
    font-family: "Sigmar One", serif;
    font-size: 120%;
    line-height: 1vh;
}


#footer {
    position: fixed;
    display: inline-block;
    background-color: var(--baby-blue); 
    width: 50%;
    min-width: 500px;
    bottom: 0;
    margin-right: auto;
    margin-left: auto;
    border: solid 2px var(--blue-black); 
    border-radius: 10px;
    padding: .5%;
    line-height: 0em;
    left: 50%;
    transform: translate(-50%, 0);
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.contactInfo {
    font-size: 100%;
    color: var(--blue-black); 
}

.centerDiv {
    margin: auto;
    width: 100% !important;
    position: relative;
    text-align: center !important;
}

.whiteText {
    color: var(--white);
}

.centerSmallDiv {
    margin: auto;
    width: 40% !important;
    position: relative;
    text-align: center !important;
}


.leftDiv {
    position: relative;
    width: 40%;
    height: 70px;
    margin-right: 5%;
    margin-left: 5%;
    float: left;
}

.rightDiv {
    position: relative;
    width: 40%;
    margin-right: 5%;
    margin-left: 5%;
    height: 70px;
    float: left;
}

.vCenteredChild {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 30%;
}

.centeredList {
    list-style-position: inside;
    list-style-type: none;
}


.column-left {
    float: left;
    width: 30%;
    position: relative;
    overflow: hidden;
}

.column-right {
    float: right;
    right: -15%;
    width: 30%;
    position: relative;
    overflow: hidden;
}

.column-center {
    float: right;
    text-align: left;
    left: -38%;
    width: 25%;
    position: relative;
    overflow: hidden;
}

hr { background-color: var(--blue-black);  height: 1px; border: 0; }


.modalImage{
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.modalImage:hover {opacity: 0.7;}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--blue-black); /* Fallback color */
    background-color: var(--translucent-blue-black); 
}


.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}



@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--white);
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: var(--grey);
    text-decoration: none;
    cursor: pointer;
}

.thumbsize{
    width: 20%;
}

.centerBlock {
    display: block;
}

.displayInline{
    display:inline;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }

    .thumbsize{
    width: 40%;
    }
}


.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-v-24 { width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-v-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px; } }

@media (max-width: 600px) {
    .video{
    display:block; width: 200px; height:100px; margin: 0 auto;
    }

    body {
        margin-left: 1px;
        margin-right: 1px;
    }
    #contentContainer {
    color: var(--blue-black);
    background-color: var(--white);
    background-color: var(--translucent-dark-green);
    border: solid 1px;
    border-radius: 10px;
    padding-top: 1vh;
    padding-left: 1vh;
    padding-right: 1vh;
    padding-bottom: 1vh;
    margin-top: 2vh;
    margin-bottom: 30%;
    width: 96%;
    box-shadow: none;
    overflow: auto;
    height: auto;
    }


    #titleText {
        font-family: "Sigmar One", serif;
        font-size: 300%;
        line-height: calc(.65em + .65vw);
        margin: 3vh;
    }

    .headerButton {
        color: var(--blue-black);
        background-color: var(--baby-blue); 
        margin: 0;
        margin-top: 5px;
        border-radius: 5px;
        font-weight: bold;
        font-size: 90%;
    }


    .contentTitle {
        text-align: center;
        font-family: "Sigmar One", serif;
        font-size: 100%;
    }

    .content {
        text-align: center;
        margin-bottom: 3%;
        font-size: 90%;
    }

    /*iPhone work around*/
    #footer {
        line-height: .75em;
        height: 15%;
        min-height: 82px;
        width: 100%;
        min-width: initial;
        /* transform: none;
        left: 0px; */
    }

    .contactInfo {
        font-size: 90%;
        color: var(--blue-black);
    }


    .footerTitle {
        text-align: center;
        font-family: "Sigmar One", serif;
        font-size: 100%;
        line-height: 1vh;
    }

    .floatedLeftImage{
    float: left;
    height: auto;
    width: 50%;
    max-width: 350px;
    margin-right: 8%;
    padding-bottom: 0;
    margin-bottom: 10px;
    box-shadow: 10px 10px 5px var(--blue-black);
    }

    .floatedRightImage{
        float: right;
        height: auto;
        width: 50%;
        max-width: 350px;
        margin-left: 8%;
        padding-bottom: 0;
        margin-bottom: 10px;
        box-shadow: 10px 10px 5px var(--blue-black);
    }
}